<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="follow" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="publisher" content="ppandp"/>
<meta name="Description" content="ppandp - Corporate Business xHTML Template" />
<title>ppandp - Corporate Business xHTML Template</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/custom-menu.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>
<script src="js/image-hover.js" type="text/javascript"></script>
<script src="js/mailmask.js" type="text/javascript"></script>
<script src="js/masonry.min.js" type="text/javascript"></script>
<script src="js/masonry.custom.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
  <!-- start header -->
  <div id="header">
    <div class="header-content">
      <div class="topnavbar clearfix"> <span class="alignright"> <a class="padding-left" href="contact.html" title="Contact">Contact</a><a class="padding-left" href="contact.html" title="Directions">Directions</a><a href="#" onclick="return false" title="Legal">Legal</a></span> <span class="alignleft"> <a class="active" href="#" onclick="return false" title="English">EN</a><span class="padding">|</span><a href="#" onclick="return false" title="Deutsch">DE</a><span class="padding">|</span><a href="#" onclick="return false" title="Fracais">FR</a> </span> </div>
      <ul class="topnav alignright">
        <li class="first"><a href="index-2.html" title="Home">Home</a>
          <div class="subnav subnav3">
            <div class="clearfix" id="home">
              <dl class="alignleft">
                <dd><a href="easing.html" title="Cycle Slider with Easing function">Easing Function</a></dd>
                <dd><a href="cycle.html" title="Full Width Image Slider">Full Width Image</a></dd>
              </dl>
            </div>
          </div>
        </li>
        <li><a href="#" onclick="return false" title="Services" class="cursor">Services</a>
          <div class="subnav subnav1">
            <div class="clearfix" id="services">
              <dl class="alignleft">
                <dt>Shortcodes</dt>
                <dd><a href="typography-elements.html" title="Typography &amp; Elements">Typography &amp; Elements</a></dd>
                <dd><a href="columns.html" title="Columns">Columns</a></dd>
                <dd><a href="price-table.html" title="Price Table">Price Table</a></dd>
                <dt class="head">Navi Options</dt>
                <dd><a href="onclick.html" title="On Click">OnClick</a></dd>
              </dl>
            </div>
          </div>
        </li>
        <li class="active"><a href="standard-portfolio.html" title="Portfolio">Portfolio</a>
          <div class="subnav subnav2">
            <div class="clearfix" id="portfolio">
              <dl class="alignleft">
                <dd><a href="standard-portfolio.html" title="Standard Portfolio">Standard Portfolio</a></dd>
                <dd><a href="filterable-portfolio.html" title="Filterable Portfolio">Filterable Portfolio</a></dd>
                <dd><a href="single-work.html" title="Single Work">Single Work</a></dd>
              </dl>
            </div>
          </div>
        </li>
        <li><a href="blog.html" title="Blog">Blog</a>
          <div class="subnav subnav3">
            <div class="clearfix" id="blog">
              <dl class="alignleft">
                <dd><a href="blog.html" title="Overview">Overview</a></dd>
                <dd><a href="single-post.html" title="Single Blog Entry">Single Blog Entry</a></dd>
              </dl>
            </div>
          </div>
        </li>
        <li><a href="about-us.html" title="Company">Company</a>
          <div class="subnav subnav3">
            <div class="clearfix" id="company">
              <dl class="alignleft">
                <dd><a href="about-us.html" title="About Us">About Us</a></dd>
                <dd><a href="team.html" title="Our Team">Our Team</a></dd>
              </dl>
            </div>
          </div>
        </li>
      </ul>
      <!-- start logo -->
      <h1 id="logo" class="alignleft"><a href="index-2.html" title="ppandp">ppandp</a></h1>
      <!-- end logo -->
    </div>
    <div id="header-bottom" class="clear"></div>
  </div>
  <!-- end header -->
  <!-- start content -->
  <div id="container" class="clearfix">
    <div class="content">
      <h2 class="no-subtext">Filterable Portfolio</h2>
      
      
      
      <ul class="nav-filter clearfix">
      <li><a href="#all" class="filter">ALL</a></li>
       <li><a href="#berlin" class="filter">Berlin</a></li>
      <li><a href="#new-york" class="filter">New York</a></li>
      <li><a href="#paris" class="filter">Paris</a></li>
    </ul>
      
      
      
      <div class="masonry-container">
      
      <div class="col1-3 padding-top box berlin masonry">
          <div class="pics">
            <div class="proj-img"><a href="images/shutterstock_84787564.jpg" title="Image Title" rel="prettyPhoto"></a><img src="images/image1-s.jpg" alt="Shutterstock 84787564" /><i>hover background</i></div>
          </div>
          <h4>Shopping Center in Berlin</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
          
          <div class="col1-3 padding-top box paris masonry">
          <div class="pics">
            <div class="proj-img"><a href="single-work.html" title="Link to Item" class="details"></a><img src="images/image2-s.jpg" alt="Shutterstock 79892062" /><i>hover background</i></div>
          </div>
          <h4>Congress Building in Paris</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
          
          <div class="col1-3 padding-top box new-york masonry last">
          <div class="pics">
            <div class="proj-img"><a href="single-work.html" title="Link to Item" class="details"></a><img src="images/image3-s.jpg" alt="Shutterstock 84787612" /><i>hover background</i></div>
          </div>
          <h4>Grand Hotel in New York</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
          
          
          
          <div class="col1-3 padding-top box berlin masonry">
          <div class="pics">
            <div class="proj-img"><a href="single-work.html" title="Link to Item" class="details"></a><img src="images/image1-s.jpg" alt="Shutterstock 84787564" /><i>hover background</i></div>
          </div>
          <h4>Shopping Center in Berlin</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
          
          <div class="col1-3 padding-top box berlin masonry">
          <div class="pics">
            <div class="proj-img"><a href="single-work.html" title="Link to Item" class="details"></a><img src="images/image1-s.jpg" alt="Shutterstock 84787564" /><i>hover background</i></div>
          </div>
          <h4>Shopping Center in Berlin</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
          <div class="col1-3 padding-top box new-york masonry last">
          <div class="pics">
            <div class="proj-img"><a href="single-work.html" title="Link to Item" class="details"></a><img src="images/image3-s.jpg" alt="Shutterstock 84787612" /><i>hover background</i></div>
          </div>
          <h4>Grand Hotel in New York</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
          
          
          <div class="col1-3 padding-top box paris masonry">
          <div class="pics">
            <div class="proj-img"><a href="single-work.html" title="Link to Item" class="details"></a><img src="images/image2-s.jpg" alt="Shutterstock 79892062" /><i>hover background</i></div>
          </div>
          <h4>Congress Building in Paris</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
          
          <div class="col1-3 padding-top box new-york masonry">
          <div class="pics">
            <div class="proj-img"><a href="single-work.html" title="Link to Item" class="details"></a><img src="images/image3-s.jpg" alt="Shutterstock 84787612" /><i>hover background</i></div>
          </div>
          <h4>Grand Hotel in New York</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
      <div class="col1-3 padding-top box berlin masonry last">
          <div class="pics">
            <div class="proj-img"><a href="images/shutterstock_84787564.jpg" title="Image Title" rel="prettyPhoto"></a><img src="images/image1-s.jpg" alt="Shutterstock 84787564" /><i>hover background</i></div>
          </div>
          <h4>Shopping Center in Berlin</h4>
          <p>Phasellus leo ante, posuere in fringilla vitae, pretium at dui. Fusce et neque quis odio gravida auctor vel non mauris. Vivamus gravida aliquet eros.</p>
          
          </div>
          
          <div class="clear"></div>
          
          </div> <!-- end masonry -->
      
    </div>
  </div>
  <!-- end content -->
</div>
<!-- start footer -->
<div id="footer" >
  <div class="footer-content clearfix">
    <div class="col1-4">
      <h3>Contact Us</h3>
      <p>ppandp Business Theme<br />
        22 Miron Drive<br />
        New York City, 12603 NY<br />
        Email: <a href="contact.html" class="escape" title="Contact">info<span><span>&part;</span></span>domain.com</a><br />
        Phone: (845) 123 4567</p>
    </div>
    <div class="col1-4">
      <h3>About Us</h3>
      <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet. </p>
    </div>
    <div class="col1-4">
      <h3>Footer Links</h3>
      <p><a href="index-2.html" title="Home">Home</a><br />
        <a href="#" title="Typography">Services</a><br />
        <a href="standard-portfolio.html" title="Portfolio">Portfolio</a><br />
        <a href="blog.html" title="Blog">Blog</a><br />
        <a href="#" title="Company">Company</a><br />
      </p>
    </div>
    <div class="col1-4 last">
      <h3>We are Social</h3>
      <p>Connect with us through the following social media platforms!</p>
      <ul class="social">
        <li class="twitter first"><a href="http://twitter.com/#!/envato/" title="twitter">Visit our twitter Account</a></li>
        <li class="facebook"><a href="http://facebook.com/envato/" title="facebook">Visit our facebook Account</a></li>
        <li class="dribble"><a href="http://dribble.com/" title="dribble">Visit our dribble Account</a></li>
        <li class="flickr"><a href="http://flickr.com/" title="flickr">Visit our flickr Account</a></li>
        <li class="vimeo"><a href="http://vimeo.com/" title="vimeo">Visit our vimeo Account</a></li>
      </ul>
      <div class="clear"></div>
    </div>
    <div id="footer-bottom" class="clear">
      <p class="alignleft">(c) 2012 Tilability.com. All rights reserved.Collect from </p>
      <p class="alignright"><a href="#" onclick="return false" title="Link">Terms of Use</a> <span class="padding">|</span> <a href="#" onclick="return false" title="Link">Privacy Policy</a></p>
    </div>
  </div>
</div>
<!-- end footer -->
<div id="background"></div>

</body>
</html>
